<template>
  <div>
    <!--引用表格-->
    <BasicTable @register="registerTable">
      <!-- <template #tableTitle>
        <a-button type="primary" v-auth="'wyf:wyf_houses:exportXls'" preIcon="ant-design:export-outlined" @click="onExportXls"> 导出</a-button>
        <j-upload-button type="primary" v-auth="'wyf:wyf_houses:importExcel'" preIcon="ant-design:import-outlined" @click="onImportXls"
          >导入</j-upload-button
        >
        <a-button :ghost="true" type="primary" preIcon="ant-design:download" @click="downloadFile('https://www.baidu.com/')"> 下载 </a-button>
      </template> -->
      <!--操作栏-->
      <template #action="{ record }">
        <TableAction :actions="getTableAction(record)" />
      </template>
    </BasicTable>
    <!--详情抽屉-->
    <DetailDrawer @register="registerDetailDrawer" type="detailSchemaAbnormalOperation" />
    <!-- 表单区域 -->
    <DisposeModal @register="registerModal" @success="handleSuccess" />
  </div>
</template>

<script lang="ts" name="wyf-wyfHouses" setup>
  import { reactive } from 'vue';
  import { BasicTable, TableAction } from '/@/components/Table';
  import { useListPage } from '/@/hooks/system/useListPage';
  import { useDrawer } from '/@/components/Drawer';
  import { useModal } from '/@/components/Modal';
  import { columnsAbnormalOperation, searchFormSchema } from '../index.data';
  import { noCheckInlist } from '../index.api';
  import DetailDrawer from './DetailDrawer.vue';
  import DisposeModal from './DisposeModal.vue';
  const queryParam = reactive<any>({});
  //注册model
  const [registerModal, { openModal }] = useModal();
  const [registerDetailDrawer, { openDrawer: openDetailDrawer }] = useDrawer();
  //注册table数据
  const { prefixCls, tableContext } = useListPage({
    tableProps: {
      rowKey: 'id',
      title: '非正常经营房源预警',
      api: noCheckInlist,
      columns: columnsAbnormalOperation,
      canResize: false,
      formConfig: {
        //labelWidth: 120,
        schemas: searchFormSchema,
        autoSubmitOnEnter: true,
        showAdvancedButton: true,
        fieldMapToNumber: [],
        fieldMapToTime: [],
      },
      actionColumn: {
        width: 120,
        fixed: 'right',
      },
      beforeFetch: (params) => {
        let xzqh = '';
        if (params.xzqh) {
          let xzqy = params.xzqh.split(',');
          xzqh = xzqy[xzqy.length - 1];
        }

        return Object.assign(params, { xzqh });
      },
      scroll: { x: 800 },
      bordered: false,
    },
  });

  const [registerTable, { reload }] = tableContext;

  /**
   * 详情
   */
  function handleDetail(record: Recordable) {
    openDetailDrawer(true, {
      record,
      isUpdate: true,
      showFooter: false,
      title: '预警详情 - 非正常经营房源预警',
    });
  }
  /**
   * 成功回调
   */
  function handleSuccess() {
    reload();
  }
  /**
   * 处置事件
   */
  function handleDispose(record: Recordable) {
    console.log('record: ', record);
    // 处理 gxqys 字段
    if (record.gxqys && typeof record.gxqys === 'string') {
      record.gxqys = record.gxqys.split(','); // 转为数组
    }
    openModal(true, {
      record,
      isUpdate: true,
      showFooter: true,
      type: 'detailSchemaAbnormalOperation',
    });
  }
  /**
   * 操作栏
   */
  function getTableAction(record) {
    return [
      {
        label: '处置',
        onClick: handleDispose.bind(null, record),
        //  auth: 'wyf:wyf_pms:edit',
      },
      {
        label: '详情',
        onClick: handleDetail.bind(null, record),
      },
    ];
  }
</script>

<style scoped lang="less">
  .jeecg-basic-table-form-container {
    padding: 0 !important;
    :deep(.ant-form) {
      margin-bottom: 12px !important;
      padding: 0 !important;
    }
  }
  :deep(.jeecg-basic-table) {
    .ant-table-wrapper {
      padding: 0 0 16px 0;
    }
  }
</style>
